<%--
  Created by IntelliJ IDEA.
  User: 86130
  Date: 2025/3/27
  Time: 10:56
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>员工管理系统</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./fontawesome-free-6.7.2-web/css/all.min.css">
    <style>
        *{
            text-align: center;
        }
        .img-fluid{
            max-width: 100px;
            height: auto;
            /*margin: 0,auto;*/
            border-radius: 50%;
        }
    </style>
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-primary">
    <div class="container">
        <a class="navbar-brand" href="#">员工管理系统</a>
    </div>
</nav>

<div class="container mt-4">
    <div class="card shadow-sm">
        <div class="card-body">
            <div class="search">
                <input type="text" placeholder="请输入用户昵称" class="search-input" name="searchEmpName" id="searchEmpName">
                <button type="button" class="btn btn-primary" onclick="searchList()">搜索</button>
            </div>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <h5 class="card-title mb-0">员工列表</h5>

                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#employeeModal">
                    <i class="fas fa-plus"></i> 新增员工
                </button>
            </div>
            <div class="table-responsive">
                <table class="table table-hover">
                    <thead class="thead-light">
                    <tr>
                        <th>ID</th>
                        <th>头像</th>
                        <th>姓名</th>
                        <th>部门</th>
                        <th>职位</th>
                        <th>入职日期</th>
                        <th>联系电话</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="employeeTableBody">

                    </tbody>
                </table>
            </div>
            <nav aria-label="分页导航">
                <ul class="pagination justify-content-center mb-0" id="pageNav">
                </ul>
            </nav>
        </div>
    </div>
</div>

<!-- 员工信息模态框 -->
<div class="modal fade" id="employeeModal" tabindex="-1" aria-labelledby="employeeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="employeeModalLabel">员工信息</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="employeeForm">
                    <div class="form-group" style="display: none;" id="empIdDiv">
                        <label for="empId">ID</label>
                        <input type="text" class="form-control" id="empId" readonly>
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" id="name" required>
                    </div>
                    <div class="form-group">
                        <label for="department">部门</label>
                        <select class="form-control" id="department" required>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="position">职位</label>
                        <input type="text" class="form-control" id="position" required>
                    </div>
                    <div class="form-group">
                        <label for="hireDate">入职日期</label>
                        <input type="date" class="form-control" id="hireDate" required>
                    </div>
                    <div class="form-group">
                        <label for="phone">联系电话</label>
                        <input type="tel" class="form-control" id="phone" required>
                    </div>
                    <div class="form-group">
                        <label for="photo">照片上传</label>
                        <div class="custom-file">
                            <input type="file" class="custom-file-input" id="photo" accept="image/*">
                            <label class="custom-file-label" for="photo">选择文件</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="submit" form="employeeForm" class="btn btn-primary">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 删除确认模态框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                确定要删除这名员工的信息吗？此操作不可撤销。
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-danger">确认删除</button>
            </div>
        </div>
    </div>
</div>

<script src="./js/jquery-3.6.0.js"></script>
<script src="./js/bootstrap.bundle.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
<script>
    $(function(){
        //页面加载时执行
        showPage(1);
        getDepartmentList();
    });


    //获取部门列表
    function getDepartmentList(){
        $.ajax({
            url:"http://localhost:25080/department",
            type:"GET",
            data:{
                method:"list"
            },
            dataType:"json",
            success:function(data){
                console.log(data);
                //清空下拉框
                $("#department").empty();
                $("#department").append(`<option value="-1">请选择部门</option>`);
                for(const dept of data){
                    $("#department").append(`<option value="`+dept.id+`">`+dept.deptName+`</option>`);
                }
            }
        })
    }

    //分页展示
    function showPage(currentPage){
        $.ajax({
            url:"http://localhost:25080/empsys",
            type:'GET',
            data:{
                method:'list',
                currentPage:currentPage,
                empName:$('#searchEmpName').val()
            },
            dataType:'json',
            success:function (data){
                console.log(data);
                $('#employeeTableBody').empty();
                for(const employee of data.data){
                    let employeeImgUrl = employee.imgUrl;
                    if(employeeImgUrl==""||employeeImgUrl==null){
                        employeeImgUrl="img/default.jpg";
                    }else{
                        employeeImgUrl="http://localhost:25080"+employee.imgUrl;
                    }
                    let tr=`<tr>
                                    <td>`+employee.id+`</td>
                                    <td><img src="`+employeeImgUrl+`" alt="员工头像" class="img-fluid"></td>
                                    <td>`+employee.empName+`</td>
                                    <td>`+employee.deptName+`</td>
                                    <td>`+employee.position+`</td>
                                    <td>`+employee.startDate+`</td>
                                    <td>`+employee.phone+`</td>
                                    <td>
                                        <button
                                         class="btn btn-sm btn-info mr-1" data-toggle="modal" data-target="#employeeModal"
                                         data-emp-id="`+employee.id+`">
                                            <i class="fas fa-edit"></i>
                                        </button>
                                        <button class="btn btn-sm btn-danger" data-emp-id="`+employee.id+`">
                                            <i class="fas fa-trash-alt"></i>
                                        </button>
                                    </td>
                                </tr>
                            `;
                    // 将tr添加到表格中
                    $('#employeeTableBody').append(tr);
                }
                //清空分页控件
                $('#pageNav').empty();
                let pageup;
                if(data.currentPage == 1){
                    pageup = `
                            <li class="page-item disabled">
                                <button class="page-link" href="#" tabindex="-1">上一页</button>
                            </li>
                        `;
                }else{
                    pageup = `
                            <li class="page-item">
                                <button class="page-link" tabindex="-1" onclick='onpage(`+(data.currentPage-1)+`)'>上一页</button>
                            </li>
                        `;
                }
                $('#pageNav').append(pageup);
                for(let i = 1; i <= data.totalPage; i++){
                    let pageitem;
                    if (i == data.currentPage){
                        pageitem = `
                                <li class="page-item active">
                                    <button class="page-link" onclick="onpage(`+i+`)">`+i+`</button>
                                </li>
                            `;
                    }else{
                        pageitem = `
                                <li class="page-item">
                                    <button class="page-link" onclick="onpage(`+i+`)">`+i+`</button>
                                </li>
                            `;
                    }
                    $("#pageNav").append(pageitem);
                    let pagedown;
                    if(data.currentPage == data.totalPage){
                        pagedown = `
                                <li class="page-item disabled">
                                    <button class="page-link" href="#" tabindex="-1">下一页</button>
                                </li>
                            `;
                    }else{
                        pagedown = `
                                <li class="page-item">
                                    <button class="page-link" href="#" tabindex="-1" onclick='onpage(`+(data.currentPage+1)+`)'>下一页</button>
                                </li>
                            `;
                    }
                    $("#pageNav").append(pagedown);
                }
            }
        });
    }
    //点击分页事件
    function onpage(currentPage){
        showPage(currentPage);
    }
    //点击搜索按钮事件
    function searchList(){
        showPage(1);
    }
</script>

<%--<script>--%>
<%--    // 初始化加载员工数据--%>
<%--    $(function (){--%>
<%--        loadEmployees(1);--%>
<%--    })--%>
<%--    /*let currentPage = 1;--%>
<%--    const pageSize = 10;*/--%>

<%--    document.getElementById('addEmployeeBtn').addEventListener('click', function() {--%>
<%--        document.getElementById('employeeModal').classList.remove('hidden');--%>
<%--        document.getElementById('modalTitle').textContent = '添加员工';--%>
<%--        document.getElementById('employeeFormContent').reset();--%>
<%--        document.getElementById('employeeId').value = '';--%>
<%--    });--%>

<%--    document.getElementById('closeModalBtn').addEventListener('click', function() {--%>
<%--        document.getElementById('employeeModal').classList.add('hidden');--%>
<%--    });--%>

<%--    document.getElementById('employeeFormContent').addEventListener('submit', function(event) {--%>
<%--        event.preventDefault();--%>
<%--        const formData = new FormData(this);--%>
<%--        const url = document.getElementById('employeeId').value ? 'employeeUpdate.jsp' : 'employeeAction.jsp';--%>
<%--        fetch(url, {--%>
<%--            method: 'POST',--%>
<%--            body: formData--%>
<%--        }).then(response => response.json())--%>
<%--            .then(data => {--%>
<%--                if (data.success) {--%>
<%--                    loadEmployees();--%>
<%--                    document.getElementById('employeeModal').classList.add('hidden');--%>
<%--                    this.reset();--%>
<%--                }--%>
<%--            });--%>
<%--    });--%>

<%--    document.getElementById('prevPageBtn').addEventListener('click', function() {--%>
<%--        if (currentPage > 1) {--%>
<%--            currentPage--;--%>
<%--            loadEmployees();--%>
<%--        }--%>
<%--    });--%>

<%--    document.getElementById('nextPageBtn').addEventListener('click', function() {--%>
<%--        currentPage++;--%>
<%--        loadEmployees();--%>
<%--    });--%>

<%--    function loadEmployees(currentPage) {--%>
<%--        $.ajax({--%>
<%--            //请求地址--%>
<%--            url: "${pageContext.request.contextPath}/user.action",--%>
<%--            type: "get",--%>
<%--            //请求参数--%>
<%--            data: {--%>
<%--                "action": "list",--%>
<%--                "currentPage": currentPage,--%>
<%--            },--%>
<%--            //返回数据类型--%>
<%--            dataType: "json",--%>
<%--            success: function (data) {--%>
<%--                console.log(data);--%>
<%--                $('#employeeTableBody').empty();--%>
<%--                for (const emp of data.data) {--%>
<%--                    let tr = `<tr>--%>
<%--                                <td>` + emp.name + `</td>--%>
<%--                                <td>` + emp.position + `</td>--%>
<%--                                <td>` + emp.department + `</td>--%>
<%--                                <td>` + emp.hireDate + `</td>--%>
<%--                                <td>--%>
<%--                                    <button class="btn edit" onclick="editUser(`+emp.id+`)">修改</button>--%>
<%--                                    <button class="btn delete" onclick="deleteUser(`+emp.id+`)">删除</button>--%>
<%--                                </td>--%>
<%--                               </tr>`;--%>
<%--                    $('#employeeTableBody').append(tr);--%>
<%--                }--%>

<%--            }--%>
<%--        })--%>
<%--        fetch(`employeeData.jsp?page=${currentPage}&size=${pageSize}`)--%>
<%--            .then(response => response.json())--%>
<%--            .then(data => {--%>
<%--                const tableBody = document.getElementById('employeeTableBody');--%>
<%--                tableBody.innerHTML = '';--%>
<%--                data.employees.forEach(employee => {--%>
<%--                    const row = document.createElement('tr');--%>
<%--                    row.innerHTML = `--%>
<%--                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${employee.name}</td>--%>
<%--                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${employee.position}</td>--%>
<%--                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${employee.department}</td>--%>
<%--                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${employee.hireDate}</td>--%>
<%--                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">--%>
<%--                            <button class="text-indigo-600 hover:text-indigo-900" onclick="editEmployee(${employee.id})">编辑</button>--%>
<%--                            <button class="ml-2 text-red-600 hover:text-red-900" onclick="deleteEmployee(${employee.id})">删除</button>--%>
<%--                        </td>--%>
<%--                    `;--%>
<%--                    tableBody.appendChild(row);--%>
<%--                });--%>
<%--            });--%>
<%--    }--%>

<%--    function editEmployee(id) {--%>
<%--        fetch(`employeeDetails.jsp?id=${id}`)--%>
<%--            .then(response => response.json())--%>
<%--            .then(data => {--%>
<%--                document.getElementById('employeeModal').classList.remove('hidden');--%>
<%--                document.getElementById('modalTitle').textContent = '编辑员工';--%>
<%--                document.getElementById('employeeId').value = data.id;--%>
<%--                document.getElementById('name').value = data.name;--%>
<%--                document.getElementById('position').value = data.position;--%>
<%--                document.getElementById('department').value = data.department;--%>
<%--                document.getElementById('hireDate').value = data.hireDate;--%>
<%--            });--%>
<%--    }--%>

<%--    function deleteEmployee(id) {--%>
<%--        if (confirm('确定要删除该员工吗？')) {--%>
<%--            fetch(`employeeDelete.jsp?id=${id}`, {--%>
<%--                method: 'DELETE'--%>
<%--            }).then(response => response.json())--%>
<%--                .then(data => {--%>
<%--                    if (data.success) {--%>
<%--                        loadEmployees();--%>
<%--                    }--%>
<%--                });--%>
<%--        }--%>
<%--    }--%>


<%--</script>--%>
<%--</body>--%>
<%--</html>--%>